<template>
    <div class="app-container">
        <h1>{{ titleName }}</h1>
        <el-card shadow="hover" style="height:160px">
            <div style="width:1140px;height:150px;margin-top: 20px;">
                <img src="../../assets/avatar/管理-圆.png" style="width:70px;height: 70px;float: left;" />
                <div style="margin-left:20px;float:left;margin-top: -20px;">
                    <span style="font-weight: 900;font-size: large;">
                        {{ cinemaForm.cinemaName }}
                    </span><br><br>
                    <span style="font-size: small;margin-top: 10px;">影院编号： {{ cinemaForm.cinemaNumber
                    }}</span><br><br>
                    <span style="font-size: small">
                        管理员： {{ cinemaForm.admin }}
                    </span><br><br>
                    <!-- <span style="font-size: small">
                            联系人电话：{{ cinemaForm.phone }}
                        </span><br> -->
                </div>
                <div style="float:left;margin-left: 110px;font-size:small">
                    <span style="float: left;margin-top: 28px;">
                        <span>营业时间：{{ cinemaForm.businessHours }}</span><br><br>
                        <span>影院联系人：{{ cinemaForm.principal }}</span><br><br>
                        <!-- <span><el-button type="info">查看联系人信息</el-button></span> -->
                    </span>
                </div>
                <!-- <div style="float:left;margin-left: 280px;margin-top: -10px;">
                    <div style="width:120px;height:105px;border-left: dashed 2px;float:left;">
                        <span style="margin-left: 45px;">
                            <svg-icon icon-class="播放" style="width:30px;height:30px"></svg-icon><br>
                            <div style="width:120px;height:105px;text-align: center;">
                                <br><i style="font-size: small;">在映电影数</i><br>
                                <i>35</i>
                            </div>
                        </span>
                    </div>
                    <div style="width:120px;height:105px;float:left;">
                        <span style="margin-left: 45px;">
                            <svg-icon icon-class="新订单" style="width:30px;height:30px"></svg-icon><br>
                            <div style="width:120px;height:105px;text-align: center;">
                                <br><i style="font-size: small;">订单数量</i><br>
                                <i>54</i>
                            </div>
                        </span>
                    </div>
                    <div style="width:120px;height:105px;float:left;">
                        <span style="margin-left: 45px;">
                            <svg-icon icon-class="金额" style="width:30px;height:30px"></svg-icon><br>
                            <div style="width:120px;height:105px;text-align: center;">
                                <br><i style="font-size: small;">交易金额</i><br>
                                <i>65474</i>
                            </div>
                        </span>
                    </div>
                </div> -->
            </div>
        </el-card>

        <el-card class="box-card" shadow="hover" style="margin-top: 10px;">
            <div slot="header" class="clearfix">
                <span>影院信息</span>
                <el-button style="float: right; padding: 3px 0" type="text" v-if="!showCinemaDetail"
                    @click="showCinemaDetail = true">展示</el-button>
                <el-button style="float: right; padding: 3px 0" type="text" v-if="showCinemaDetail"
                    @click="showCinemaDetail = false">隐藏</el-button>
            </div>
            <el-form ref="form" :model="cinemaForm" label-width="120px" v-if="showCinemaDetail">

                <el-form-item label="影院名称" style="margin-top: 20px;">
                    <el-input v-model="cinemaForm.cinemaName" placeholder="请输入" style="width: 360px;"></el-input>
                </el-form-item>

                <el-form-item label="影院地址" style="margin-top: 20px;">
                    <el-input v-model="cinemaForm.address" placeholder="请输入" style="width: 360px;"></el-input>
                </el-form-item>

                <el-form-item label="影院状态">
                    <el-select v-model="cinemaForm.status">
                        <el-option v-for="item in cinemaStatusList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="影院邮箱" style="margin-top: 20px;">
                    <el-input v-model="cinemaForm.cinemaEmail" placeholder="请输入" style="width: 360px;"></el-input>
                </el-form-item>

                <el-form-item label="影院公众号" style="margin-top: 20px;">
                    <el-input v-model="cinemaForm.cinemaVx" placeholder="请输入" style="width: 360px;"></el-input>
                </el-form-item>

                <el-form-item label="影院营业时间" style="margin-top: 20px;">
                    <!-- <el-input v-model="cinemaForm.businessHours" placeholder="请输入" style="width: 360px;"></el-input> -->
                    <el-time-picker format="HH:mm" is-range v-model="cinemaOCTime" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                </el-form-item>

                <!-- <el-form-item label="影院环境" style="margin-top: 20px;">
                <el-input v-model="cinemaForm.cinemaPic" placeholder="请输入" style="width: 360px;"></el-input>
            </el-form-item> -->

                <el-form-item label="入驻时间" style="margin-top: 20px;">
                    <el-date-picker v-model="cinemaForm.entryTime" :disabled=true value-format="yyyy-MM-dd"
                        placeholder="请输入" style="width: 360px;"></el-date-picker>
                </el-form-item>

                <el-form-item label="创建人" v-if="showNoSee">
                    <el-input v-model="cinemaForm.createBy" style="width: 360px;"></el-input>
                </el-form-item>

                <el-form-item label="创建时间" v-if="showNoSee">
                    <el-input v-model="cinemaForm.createTime" style="width: 360px;"></el-input>
                </el-form-item>

                <el-form-item label="更新人" v-if="showNoSee">
                    <el-input v-model="cinemaForm.updateBy" style="width: 360px;"></el-input>
                </el-form-item>

                <el-form-item label="更新时间" v-if="showNoSee">
                    <el-input v-model="cinemaForm.updateTime" style="width: 360px;"></el-input>
                </el-form-item>

                <div style="margin-left: 120px;">
                    <el-button type="primary" @click="onSubmit" v-if="showBtn">保存</el-button>
                    <el-button type="success" @click="toMovieHall" v-if="showBtn">影厅</el-button>
                </div>
            </el-form>

        </el-card>

        <el-card class="box-card" shadow="hover" style="margin-top: 10px;">
            <div slot="header" class="clearfix">

                <span>影厅信息</span>
                <el-button style="float: right; padding: 3px 0" type="text" v-if="!showMovieHall"
                    @click="showMovieHall = true">展示</el-button>
                <el-button style="float: right; padding: 3px 0" type="text" v-if="showMovieHall"
                    @click="showMovieHall = false">隐藏</el-button>
                <el-button style="float: right;margin-right: 10px;padding: 3px 0" type="text"
                    @click="addMovieHall">添加影厅</el-button>
            </div>
            <div v-for="o in movieHallList" :key="o.id" class="text item" v-if="showMovieHall">
                <el-tooltip class="item" effect="dark" :content="'当前状态：' + o.status" placement="right">
                    <span style="line-height:36px;">{{ o.hallName }}<i class="el-icon-question"></i></span>
                </el-tooltip>

                <el-button style="float: right;" type="text" v-if="showMovieHall"
                    @click="removeMovieHall(o.id)">影厅删除</el-button>
                <el-button style="float: right;margin-right: 8px;" type="text" v-if="showMovieHall"
                    @click="toSeat(o.hallName, o.id)">座位管理</el-button>
                <el-button style="float: right;" type="text" v-if="showMovieHall"
                    @click=changeMovieHallStatus(o)>切换状态</el-button>
            </div>
        </el-card>

    </div>
</template>

<script>
import { importDic } from '@/utils'
import { getCinemaId, getCinemaDetail, addOrUpdateCinema, getMovieHallListByCinemaId, delMovieHallById, changeMovieHallStatus, addOrUpdateMovieHall } from '@/api/cinema'
import { getToken } from '@/utils/auth'

export default {
    data() {
        return {
            cinemaForm: {
                id: '',
                cinemaLogo: '',
                cinemaName: '',
                cinemaNumber: '',
                principal: '',
                entryTime: '',
                admin: '',
                address: '',
                status: 1,
                createBy: '',
                createTime: '',
                updateBy: '',
                updateTime: '',
                businessHours: '',
                rowsSeatCount: '',
                colsSeatCount: ''
            },
            movieHallForm: {
                cinemaId: '',
                cinemaName: '',
                hallName: ''
            },
            cinemaOCTime: ['Sun Feb 19 2023 10:00:00 GMT+0800', 'Sun Feb 19 2023 22:00:00 GMT+0800'],
            loading: 0,
            movieHallStatus: importDic('movieHallStatus'),
            dialogVisible: false,
            movieHallList: [],
            showCinemaDetail: false,
            showMovieHall: false,
            showNoSee: false,
            showBtn: true,
            titleName: '',
            formDisabled: false,
            cinemaStatusList: importDic('cinemaStatus'),
            contentValue: []
        }
    },
    mounted() {

        this.getCinemaDetail()
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate().then(() => {
                this.loading++
                this.cinemaForm.updateTime = ''
                this.cinemaForm.entryTime = new Date(this.cinemaForm.entryTime)
                var a = new Date(this.cinemaOCTime[0]).toString().slice(16, 21)
                var b = new Date(this.cinemaOCTime[1]).toString().slice(16, 21)
                this.cinemaForm.businessHours = a + '-' + b
                addOrUpdateCinema(this.cinemaForm, getToken()).then(res => {
                    this.$router.push("/principalCinema")
                    this.$message.success(res.message)
                }).catch(e => console.error(e)).finally(() => this.loading--)
            }).catch(e => console.error(e))
        },
        getCinemaId() {
            console.log(JSON.parse(sessionStorage.getItem("loginUser")))

        },
        getCinemaDetail() {
            this.loading++
            getCinemaId(JSON.parse(sessionStorage.getItem("loginUser")), getToken()).then(res => {
                this.cinemaForm.id = res.result.id
                console.log('现在' + this.cinemaForm.id)
                if (res.code == 10008) {
                    getCinemaDetail(this.cinemaForm.id, getToken()).then(res => {
                        console.log('getCinemaDetail' + res.result)
                        this.cinemaForm = res.result
                        var c = this.cinemaForm.businessHours.slice(0, 5)
                        var d = this.cinemaForm.businessHours.slice(6, 11)
                        this.cinemaOCTime = ['Sun Feb 19 2023 ' + c + ':00 GMT+0800', 'Sun Feb 19 2023 ' + d + ':00 GMT+0800']
                    }).catch(e => console.error(e)).finally(() => this.loading--)
                    this.getMovieHallList()
                }
            })

        },
        toMovieHall() {
            this.$router.push("/movieHall")
        },

        getMovieHallList() {
            this.loading++
            getMovieHallListByCinemaId(this.cinemaForm.id, getToken()).then(res => {
                this.movieHallList = res.result
                for (var i = 0; i < res.result.length; i++) {
                    if (this.movieHallList[i].status == 1) {
                        this.movieHallList[i].status = '开启'
                    } else {
                        this.movieHallList[i].status = '关停'
                    }
                }
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        changeMovieHallStatus(data) {
            this.$alert('当前状态为：' + data.status, '切换状态', {
                confirmButtonText: '确定'
            }).then(() => {
                changeMovieHallStatus(data.id, getToken()).then(res => {
                    this.getMovieHallList()
                    this.$message({
                        message: '状态切换成功',
                        type: 'success'
                    })
                }).catch(e => console.log(e))

            }).catch(() => {
                this.$message({
                    message: '状态切换已取消',
                    type: 'info'
                })
            })

        },
        removeMovieHall(id) {
            this.delConfirm().then(() => {
                this.loading++
                console.log(id)
                delMovieHallById(id, getToken()).then(res => {
                    this.$message.success(res.message)
                    this.getMovieHallList()
                }).catch(e => console.log(e)).finally(() => this.loading--)
            }).catch(e => console.log(e))
        },
        addMovieHall() {
            this.$prompt('请输入', '影厅名称', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                // inputErrorMessage: '邮箱格式不正确'
            }).then(({ value }) => {
                this.movieHallForm.cinemaId = this.cinemaForm.id
                this.movieHallForm.cinemaName = this.cinemaForm.cinemaName
                this.movieHallForm.hallName = value
                addOrUpdateMovieHall(this.movieHallForm, getToken()).then(res => {
                    this.$message({
                        type: 'success',
                        message: '已新增影厅: ' + value
                    });
                    this.getMovieHallList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        toSeat(hallName, hallId) {
            this.$router.push({
                path: '/seat',
                query: {
                    hallName: hallName,
                    hallId: hallId
                }

            })
        }
    }
}
</script>